<template>
  <div class="comments-container">
    <div>
      <el-carousel :interval="3000" height="400px" arrow="always" :key="1">
        <el-carousel-item v-for="item in banners" :key="item">
          <img alt="" class="banner-image" :src="item" :key="item">
        </el-carousel-item>
      </el-carousel>
    </div>
    <el-row class="bg-light-gray  p_y15">
      <el-col :span="10" :offset="2">
        <h2>用药说明</h2>
      </el-col>
      <el-col :span="10">
        <div class="flex-row-reverse">
          <el-button type="text" @click="$router.push({name:'frontNews'})">查看更多></el-button>
        </div>
      </el-col>
    </el-row>
    <el-row class="bg-light-gray">
      <el-col :span="10" :offset="2">
        <el-carousel ref="carousel" height="300px" arrow="hover" :key="2">
          <el-carousel-item v-for="item in tableImageData||[]" :key="item.cover">
            <img alt=""
                 @click="$router.push({name:'frontNewsInfo',query:{id:item.id}})"
                 class="banner-image" :src="item.cover" :key="item.cover">
          </el-carousel-item>
        </el-carousel>
      </el-col>
      <el-col :span="10" :offset="2">
        <div class="flex-column">
          <div
              class="medic-link flex-row justify-between"
              v-for="(item,i) of tableData||[]" :key="i"
              @click="$router.push({name:'frontNewsInfo',query:{id:item.id}})">
            <div class="text-ellipsis flex1">{{ item.medicineName }} 用药说明</div>
            <div class="font12 text-light flex-shrink" style="width: 160px;">{{ format(item.createTime) }}</div>
          </div>
        </div>
      </el-col>
    </el-row>


  </div>
</template>

<script>
import {defineComponent, nextTick, reactive, ref, toRaw} from "vue"
import {deepClone, isEmpty} from "../utils/helpers";
import Toast from "../utils/Toast";
import News from "../api/modules/News";
import dayjs from "dayjs";
import {usePageMeta} from "../hooks/usePageTableData";


export default defineComponent({
  name: "Home",
  data() {
    return {
      banners: [
        "banner/b1.webp",
        "banner/b2.jpeg",
        "banner/b3.jpeg",
      ],
    }
  },
  methods: {
    format(time, layout = 'YYYY-MM-DD HH:mm:ss') {
      return dayjs(time).format(layout)
    }
  },
  setup() {
    const carousel = ref(null); // 跑马灯组件
    const pageHandle = usePageMeta();
    const params = reactive({
      filter: "",
    });
    const tableData = ref([]); // 列表数据
    const tableImageData = ref([]); // 有封面图的列表数据
    onPageChange(1); // 初始化时直接请求一次分类列表
    async function onPageChange(page) {
      const pageMeta = deepClone(toRaw(pageHandle.pageMeta.value));
      if (page) {
        pageMeta.index = page;
      }
      try {
        const _params = {
          ...pageMeta,
          ...params,
        };
        const {data} = await News.lists(_params);
        const _data = (data.data || []).map(v => {
          let content = {};
          try {
            content = JSON.parse(v.analysis) || {}
          } catch (e) {

          }
          return {
            ...v,
            ...content,
          }
        });
        tableData.value = _data; // 列表数据
        tableImageData.value = _data.filter(v => !isEmpty(v.cover)); // 存在封面图的数据
        nextTick(() => { // 解决element ui组件库 动态跑马灯组件首次空白渲染问题
          if (carousel.value) {
            carousel.value.next();
          }
        })

        pageHandle.updatePageMeta(_params.index, data.count);


      } catch (e) {
        console.log(e);
      }
    }

    return {
      ...pageHandle,
      carousel,
      tableData,
      tableImageData,
    }
  },
})
</script>

<style lang="scss" scoped>
.banner-image {
  width: 100%;
  height: 100%;
}

.medic-link {
  line-height: 30px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
  border-bottom: 1px #e5e5e5 solid;
  padding-bottom: 5px;
  padding-top: 10px;
  cursor: pointer;
  font-weight: normal;

  &:link {
    color: #000;
    text-decoration: none;
  }

  &:hover {
    color: #35A8F1;
  }
}


</style>
